<%@ page language="java"  pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/views/common/taglib.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订货页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <%@ include file="/WEB-INF/views/common/resource.jsp" %>
    <script src="${rtx}/js/shop.js"></script>
    <script>
        var ctx ='${ctx}';
    </script>
</head>

<body>
<div class="pop_bg order"></div>
    <%--${goods_list}--%>
    <div class="page">
        <div class="head_box">
            <div class="type_chose_box">
                <ul>
                    <li id="all_brand" class="onthis" onclick="showByBrand()" >所有品牌</li>
                    <li id="all_type" onclick="showByType()">所有品类</li>
                </ul>
                <%--<i class="iconfont icon-sousuo" id="seach_btn"></i>--%>
            </div>
            <%--<div class="seach_box">--%>
                <%--<input type="text" placeholder="请输入商品名" />--%>
                <%--<a href="javascript:;" id="cancel">取消</a>--%>
                <%--<a href="javascript:;">搜索</a>--%>
            <%--</div>--%>
        </div>
        <div class="left_nav_box" id="brand_type">
            <ul id="brand_type_list">
                <c:forEach items="${brand_list}" var="list">
                    <li onclick="selectBrand(this)" brand_no="${list.d_no}" >${list.name}</li>
                </c:forEach>
            </ul>
        </div>

        <div class="left_nav_box" id="goods_type" style="display: none">
            <ul id="goods_type_list">
                <c:forEach items="${type_list}" var="list">
                    <li onclick="selectGoodType(this)" goods_type="${list.d_no}" >${list.name}</li>
                </c:forEach>
            </ul>
        </div>


        <div class="right_product_box">
            <ul>
                <c:forEach var="list" items="${goods_list}">
                    <li class="goods ${list.goods_brand_no} ${list.goods_type_no}">
                        <div class="pro_img_box"><img src="${list.goods_img}" width="70" height="70" /></div>
                        <h1>${list.goods_name}</h1>
                        <span>¥${list.goods_price}</span>
                        <p>规格：${list.goods_specifications}</p>
                        <p>${list.desc}</p>
                        <div class="increase_box">
                            <div class="after_plus" id="${list.goods_no}_after_plus">
                                <i class="iconfont icon-jian jian" onclick="subFromShopCar('${list.goods_no}')"></i>
                                <span class="num" id="${list.goods_no}_num" >0</span>
                            </div>
                            <i class="iconfont icon-jia plus" onclick="addToShopCar('${list.goods_no}')"></i>
                        </div>
                        <c:if test="${fn:length(list.sale_list) > 0}">
                            <div class="free_info_box">
                                <em>促</em>
                                <span style="color: #BDBDBD">该商品共有${fn:length(list.sale_list)}个促销活动</span>
                                <i class="iconfont icon-xiala"></i>
                            </div>
                            <div class="free_info_detil">
                                <c:forEach items="${list.sale_list}" var="sale">
                                    <c:if test="${sale.sale_type eq 'PRICE_OFF'}">
                                        <p>满${sale.buy_num}箱减${sale.off_price}元</p>
                                    </c:if>

                                    <c:if test="${sale.sale_type eq 'SEND_GIVEAWAY'}">
                                        <p>满${sale.buy_num}箱赠${sale.giveaway_num}件${sale.giveaway_name}</p>
                                    </c:if>
                                </c:forEach>
                            </div>
                        </c:if>
                    </li>
                </c:forEach>
            </ul>
        </div>



        <%--购物车--%>
        <div class="order_shoppingcar_box">
            <p onclick="emptyShopCar()"><a>清空购物车</a></p>
            <ul class="shopping_order_list" id="shop_car_list">

            </ul>
        </div>
        <div class="order_total_box">
            <div class="shopping_car_box">
                <i class="iconfont icon-gouwuche"></i>
                <em id="goods_num">0</em>
            </div>
            <div class="total_price_box">
                <strong id="car_price">¥0</strong>
                <span>配送费：¥0</span>
                <p>全场商品满2箱才可配送</p>
            </div>
            <div class="balance_btn" onclick="toShoCar()">我要下单</div>
        </div>

        <%--底部菜单--%>
        <%@ include file="/WEB-INF/views/common/footer.jsp" %>
    </div>
</body>
<script type="text/javascript">
    $('.type_chose_box ul li').click(function(e){
        $('.type_chose_box ul li').removeClass('onthis');
        $(this).addClass('onthis');
    });

    $('#seach_btn').click(function(e){
        $('.type_chose_box').hide();
        $('.seach_box').show();
    });

    $('#cancel').click(function(e){
        $('.type_chose_box').show();
        $('.seach_box').hide();
    });

//    $('.plus').click(function(e){
//        var this_num = parseInt($(this).prev('.after_plus').find('span').html());
//        if(this_num === 0){
//            $(this).prev('.after_plus').animate({
//                opacity:'1',
//                right:'15px'
//            });
//        }
//        this_num ++;
//        $(this).prev('.after_plus').find('span').html(this_num);
//    });

//    $('.jian').click(function(e){
//        var this_num = parseInt($(this).next().html());
//        if(this_num <= 1){
//            //判断是否是购物车结算内的减号，如果是，数量减到0将此条商品删除
//            if($(this).hasClass('sc')){
//                $(this).parent().parent().parent().remove();
//            }else{
//                $(this).parent().animate({
//                    opacity:'0',
//                    right:'0px'
//                });
//            }
//        }
//        this_num --;
//        $(this).next().html(this_num);
//    });

    $('.free_info_box').click(function(e){
        if($(this).find('i').hasClass('open')){
            $(this).find('i').removeClass('open');
            $(this).next('.free_info_detil').hide();
        }else{
            $(this).find('i').addClass('open');
            $(this).next('.free_info_detil').show();
        }
    })

    $('.shopping_car_box').click(function(e){
        if($('.order_shoppingcar_box').hasClass('open')){
            $('.order_shoppingcar_box').removeClass('open');
            $('.pop_bg.order').hide();
            $('.order_shoppingcar_box').hide();
            $('.order_shoppingcar_box').animate({marginBottom:'-100%'},500);
        }else{
            $('.order_shoppingcar_box').addClass('open');
            $('.pop_bg.order').show();
            $('.order_shoppingcar_box').show();
            $('.order_shoppingcar_box').animate({marginBottom:'0px'},500);
        }
    })
</script>


</html>
